// a1、窗口 (页面）加载事件
window.addEventListener('load', function () {
    // a2、获取元素
    let banner = this.document.querySelector('.banner');
    let ul = this.document.querySelector('ul');

    // a3、获取banner的宽度
    let w = banner.offsetWidth;
    // a13、判断移动有移动,才开始判断回弹与下一张
    let flag = false;

    // a4.1 设置一个变量，来表示第几张图了
    let index = 0;
    // ul.style.transform = `translateX(${-w}px)`;
    // a4、定时器，自动轮播
    let timer = setInterval(function () {
        index++;
        // a4.2 用translate，就不需要那些定位了
        let x = -index * w;
        // a4.3 滚动效果（动画）,就不需要封装的动画函数了animate(obj, target, callback)
        ul.style.transition = `all .3s`;
        ul.style.transform = `translateX(${x}px)`;
    }, 2000);


    // a7、动态生成小圆圈
    let ol = this.document.querySelector('.circle');

    for (let i = 0; i < ul.children.length; i++) {
        let li = document.createElement('li');

        // a7.1 记录当前小圆圈的索引号，通过自定义属性来做
        li.setAttribute('index', i);
        // a7.2 把li插入ol
        ol.appendChild(li);
    }
    // a7.3 给第一个加上变化类名
    ol.children[0].classList.add('current');



    // a8. 克隆第一张给最后面
    let first = ul.children[0].cloneNode(true);
    ul.appendChild(first);

    // a8.1 克隆最后一张给最前面
    let last = ul.children[ul.children.length - 2].cloneNode(true);
    ul.prepend(last);

    // a5、等着我们过渡完成之后，再去判断 监听过渡完成的事件 transitionend 
    ul.addEventListener('transitionend', function () {

        // console.log(ul.children.length);
        // console.log(index);
        // a5.1 无缝滚动
        if (index >= ul.children.length - 2) {
            index = 0;
            // console.log(index);
            // 去掉过渡效果 这样让我们的ul 快速的跳到目标位置，按道理说，即是没有过度，也能看到变化，但是这里；正好两张图是一样的，所以看不到变化；
            ul.style.transition = 'none';
            // 利用最新的索引号乘以宽度 去滚动图片
            let translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } else if (index < 0) {
            // console.log(index);
            index = ul.children.length - 3;
            ul.style.transition = 'none';
            // 利用最新的索引号乘以宽度 去滚动图片
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }

        // a6. 小圆点跟随变化
        // 把ol里面li带有current类名的选出来去掉类名 remove
        // console.log(index, ul.children.length - 2);
        ol.querySelector('.current') && ol.querySelector('.current').classList.remove('current');
        // 让当前索引号 的小li 加上 current   add
        ol.children[index].classList.add('current');
    })



    // a9. 手指滑动轮播图
    let startX = 0;
    let moveX = 0;
    // a9.1 手指触摸时
    ul.addEventListener('touchstart', function (e) {
        startX = e.targetTouches[0].pageX;
        // a9.5 手指触摸的时候就停止定时器
        clearInterval(timer);
    })

    // a9.2 移动手指
    ul.addEventListener('touchmove', function (e) {
        // a9.3 计算移动距离
        moveX = e.targetTouches[0].pageX - startX;
        // a9.4 移动盒子：盒子原来的位置 + 手指移动的距离 
        var translatex = -index * w + moveX;
        // 手指拖动的时候，不需要动画效果所以要取消过渡效果
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translatex + 'px)';
        e.preventDefault(); // a9.6 阻止滚动屏幕的行为

        // a13.1 有移动
        flag = true;
    })

    // a10. 手指离开 根据移动距离去判断是回弹还是播放上一张下一张
    ul.addEventListener('touchend', function (e) {

        // a10.1 如果移动距离大于50像素我们就播放上一张或者下一张,绝对值Math.abs()
        // a13.2
        if (flag) {
            if (Math.abs(moveX) > 150) {
                // a10.2、如果是右滑就是 播放上一张 moveX 是正值
                if (moveX > 0) {
                    index--;
                } else {
                    // a10.3、如果是左滑就是 播放下一张 moveX 是负值
                    index++;
                }
                let translatex = -index * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            } else {
                // a11、如果移动距离小于50像素我们就回弹
                var translatex = -index * w;
                ul.style.transition = 'all .1s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            }
        }

        // a12、手指离开的时候就重新开启定时器
        // a12.1 开之前要清除，这要才能确保只有一个定时器在运行
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            var translatex = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 2000);
    });
});